<template>
  <div>
    <!-- <template v-if="type=='all'">
      <el-button type="primary" @click="changeDesigner">变更设计师</el-button>
      <Designer v-if="showDesignerDlg" ref="designerDlg" :visible.sync="showDesignerDlg" :detail-data="activedData" @success="refreshTable" />
    </template>
    <el-button v-else type="primary" @click="clickHandle">产品配置</el-button> -->
    <c-table-box
      ref="customizationTable"
      show-index
      hide-func
      :selected-arry.sync="tableSelected"
      :table-config="tableConfig"
      :other-filters="otherFilters"
      :other-raw="otherRaw"
      @selection-change="selectionChangeHandle"
    >
      <!-- <template #btn>
        <c-permission v-if="type==='all'" code="all">
          <Designer v-if="showDesignerDlg" ref="designerDlg" :visible.sync="showDesignerDlg" :detail-data="activedData" @success="refreshTable" />
          <c-button type="primary" opt-code="changedesigner" @click="changeDesigner">变更设计师</c-button>
          <c-button type="primary" opt-code="export" @click="exportVisible=true">导出</c-button>
        </c-permission>
        <c-permission v-if="type==='configuration'" code="configuration">
          <c-button type="primary" opt-code="configuration" @click="clickHandle">产品配置</c-button>
        </c-permission>
      </template> -->
    </c-table-box>
    <div>
      <export-files v-if="exportVisible" title="导出" :config="exportAllConfig" :visible.sync="exportVisible" @success="handleExportSuccess" />
    </div>
  </div>
</template>
<script>
// import Designer from './designer'
export default {
  name: 'DetailTable',
  components: {},
  props: {
    type: {
      type: String,
      default: ''
    },
    activeType: {
      type: String,
      default: ''
    },
    detailId: {
      type: String,
      default: ''
    },
    serachFilters: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      exportVisible: false,
      typeFilters: [],
      showDesignerDlg: false,
      activedData: {},
      tableSelected: [],
      otherRaw: {},
      otherFilter: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/productConfigDetail/page`,
        setting: []
      },
      setting1: [
        {
          prop: 'poCode',
          label: '采购单号'
        },
        {
          prop: 'orderType',
          label: '订单类型'
        },
        {
          prop: 'poRowState',
          label: '订单状态'
        },
        {
          prop: 'cabinetCode',
          label: '产品柜号'
        },
        {
          prop: 'productType',
          label: '产品类型'
        },
        {
          prop: 'productDesc',
          label: '产品名称'
        },
        {
          prop: 'productColor',
          label: '产品主色'
        },
        {
          prop: 'productNumber',
          label: '柜体数量'
        }
        // {
        //   prop: 'purchaseControlState',
        //   label: '采购类型'
        // }
      ],
      setting2: [
        {
          prop: 'poCode',
          label: '采购单号'
        },
        {
          prop: 'orderType',
          label: '订单类型'
        },
        {
          prop: 'poRowState',
          label: '订单状态'
        },
        {
          prop: 'productCode',
          label: '产品编码'
        },
        {
          prop: 'productDesc',
          label: '产品描述'
        },
        {
          prop: 'productNumber',
          label: '产品数量'
        }
      ]
    }
  },
  computed: {
    otherFilters() {
      return [...this.typeFilters]
    },
    exportAllConfig() {
      return [{
        code: 'export',
        name: '定制类样品配置',
        dataApi: '/slm-admin/api/v1/productConfigSheet/export?type=0',
        selectedRows: this.tableSelected,
        paramsRaw: {},
        filtersRaw: this.otherFilters,
        queryField: 'id'
      }]
    }
  },
  watch: {
    type: {
      handler(v) {
        this.setOtherFilters(v)
        this.setAllTable()
      },
      immediate: true
    },
    serachFilters: {
      handler(v) {
        if (this.activeType !== this.type) return
        this.setOtherFilters(this.type)
        this.$nextTick(() => {
          this.$refs.customizationTable.initTableData()
        })
      }
    }
  },
  created() {
    // this.setOtherFilters([])
  },
  activated() {
    if (this.ready) {
      this.$nextTick(() => {
        this.$refs.customizationTable.initTableData()
      })
    }
  },
  deactivated() {
    this.ready = true
  },
  methods: {
    // 全部
    setAllTable() {
      if (this.type === 'BATHROOM') {
        this.$set(this.tableConfig, 'setting', this.setting2)
      } else {
        this.$set(this.tableConfig, 'setting', this.setting1)
      }
    },
    // 设置过滤条件
    setOtherFilters(type) {
      switch (type) {
        // case 'CUSTOMIZED':
        //   { const otherFilter = [{ 'id': 'configSheetId', 'property': 'configSheetId', 'operator': '=', 'value': this.detailId }]
        //     const arr1 = [{ 'id': 'orderType', 'property': 'orderType', 'operator': '=', 'value': 'A' }]
        //     this.typeFilters = [...otherFilter, ...arr1]
        //   }
        //   break
        case 'CUPBOARD':
          { const otherFilter = [{ 'id': 'configSheetId', 'property': 'configSheetId', 'operator': '=', 'value': this.detailId }]
            const arr = `[墙变, 衣柜, 橱柜]`
            const arr1 = [{ 'id': 'orderType', 'property': 'orderType', 'operator': 'in', 'value': arr }]
            this.typeFilters = [...otherFilter, ...arr1]
          }
          break
        case 'BATHROOM':
          { const otherFilter = [{ 'id': 'configSheetId', 'property': 'configSheetId', 'operator': '=', 'value': this.detailId }]
            const arr1 = [{ 'id': 'orderType', 'property': 'orderType', 'operator': '=', 'value': '卫浴' }]
            this.typeFilters = [...otherFilter, ...arr1]
          }
          break
      }
    },
    selectionChangeHandle(rows) {
      this.tableSelected = rows
    },
    // 导出
    handleExport() {
      this.exportVisible = true
    },
    // 刷新
    refreshTable(isInit) {
      this.$refs.customizationTable.initTableData(isInit ? '' : 'onPage')
    }
  }
}
</script>
